<template>
  <div class="help-container">
    <Headbar />
    <div class="help">
        <Header />
        <Nav />
        <div class="help-content-item">
            <div class="main-content">
                <div class="hot-problems">
                    <div class="hot-problems-con">
                        <div class="help-list-header"><span class="header-title-con"></span>热门问题</div>
                        <div class="hot-problems-wrap">
                            <div class="problems-list"  @click="routeToPath('/help/detail?active=1-0&Id=1099917329250394112','new')" >
                                <img class="pro-icon" src="../../assets/images/help/help_01.png"/>
                                <p class="problems-title">购物流程</p>
                            </div>
                            <div class="problems-list"  @click="routeToPath('/help/detail?active=1-3&Id=1127057712933511168','new')" >
                                <img class="pro-icon" src="../../assets/images/help/help_02.png"/>
                                <p class="problems-title">订单管理</p>
                            </div>
                            <div class="problems-list" @click="routeToPath('/help/detail?active=1-4&Id=1127099268432404480','new')" >
                                <img class="pro-icon" src="../../assets/images/help/help_03.png"/>
                                <p class="problems-title">售后服务</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="self-service">
                    <div class="self-service-con">
                        <div class="help-list-header"><span class="header-title-con"></span>自助服务</div>
                        <div class="self-wrap">
                            <div class="self-service-list" v-for="(item,index) in selfContent">
                                <div class="self-service-leftCon">
                                    <img :src=" item.selfIcon "/>
                                </div>
                                <div class="self-service-centerCon">
                                    <h3 class="self-alt">{{ item.selfAlt }}</h3>
                                    <div class="self-sub">
                                        <a class="self-sub-list" v-for="(j,k) in item.subList" @click="routeToPath(j.url,'new')" >{{ j.name }}</a>
                                    </div>
                                </div>
<!--                                <div class="self-service-rightCon">-->
<!--                                    <img src="../../assets/images/help/help_09.png"/>-->
<!--                                </div>-->
                            </div>

                        </div>
                    </div>
                </div>
                <div class="contact-us">
                    <div class="contact-us-con">
                        <div class="help-list-header"><span class="header-title-con"></span>联系我们</div>
                        <div class="contact-wrap">
                            <p>
                                招商热线
                                <img class="tel-ico" src="../../assets/images/help/help_08.png"/>
                                <span class="tel-num">020-28955054</span>
<!--                                或咨询在线客服-->
<!--                                <a class="consult-now" @click="openQQ()">立即咨询</a>-->
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Footbars />
  </div>
</template>

<script>
import Header from './components/Header'
import Nav from './components/Nav'
import Headbar from '@/components/Layouts/Headbar'
import Footbars from '@/components/Layouts/Footbars'
import config from '@/seo/config'
export default {
  name: 'Help',
  components: {
    Header,
    Nav,
    Headbar,
    Footbars,
  },
  data() {
    return {
        selfContent: [
            {
                selfIcon: require('@/assets/images/help/help_04.png'),
                selfAlt: '账号与密码',
                subList: [{
                    name: '注册登录',
                    url: '/help/detail?active=1-5&Id=1131736785387528192',
                },{
                    name: '忘记密码',
                    url: '/help/detail?active=1-2&Id=1125695049364152320',
                },{
                    name: '实名认证',
                    url: '/help/detail?active=1-6&Id=1131761089923784704',
                }]
            },
            {
                selfIcon: require('@/assets/images/help/help_05.png'),
                selfAlt: '我是买家',
                subList: [{
                    name: '购物流程',
                    url:  '/help/detail?active=1-0&Id=1099917329250394112',
                },{
                    name: '进货车',
                    url:  '/help/detail?active=1-9&Id=1131855199733030912',
                },{
                    name: '支付方式',
                    url:  '/help/detail?active=1-7&Id=1131836586825359360',
                },{
                    name: '确认收货',
                    url:  '/help/detail?active=1-8&Id=1131854119469064192',
                }]
            },
            {
                selfIcon: require('@/assets/images/help/help_06.png'),
                selfAlt: '我是卖家',
                subList: [{
                    name: '商品发布',
                    url:  '/help/detail?active=2-4&Id=1127052739185221632',
                },{
                    name: '云工厂管理',
                    url:  '/help/detail?active=2-5&Id=1127102327564804096',
                },{
                    name: '资产管理',
                    url:  '/help/detail?active=2-1&Id=1099976600294006784',
                },{
                    name: '发票问题',
                    url:  '/help/detail?active=2-0&Id=1099917429934661632',
                }]
            },
            {
                selfIcon: require('@/assets/images/help/help_07.png'),
                selfAlt: '规则中心',
                subList: [{
                    name: '招商入驻',
                    url:  '/merchants/package',
                },{
                    name: '用户协议',
                    url:  '/help/detail?active=4-0&Id=1127108223510519808',
                }]
            },
        ]
    }
  },
  head: config.help,
  created() {

  },
  methods: {
      logout() {
          this.$store.dispatch('LogOut').then(() => {
              location.reload();
          })
      },
      openQQ(){
          window.location.href = 'tencent://message/?uin=382093872&Site=&menu=yes'
      }
  }
}
</script>

<style lang="scss" scoped>
.help-container{
    .help-content-item{
        width: 100%;
        min-width: 1200px;
        .main-content{
            width: 1200px;
            margin: 0 auto;

            .help-list-header{
                height: 20px;
                line-height: 20px;
                // border-left: 3px solid #255B8B;
                padding-left: 8px;
                color: #333;
                font-size: 18px;
                font-weight: bold;
                margin: 25px 0 20px;
                .header-title-con{
                    display: inline-block;
                    width: 3px;
                    height: 16px;
                    background: #255B8B;
                    margin-right: 6px;
                    vertical-align: -2px;
                }
            }
            .hot-problems-wrap{
                width: 100%;
                height: 120px;
                background: #fff;
                border-radius: 10px;
                .problems-list{
                    width: 180px;
                    height: 120px;
                    float: left;
                    text-align: center;
                    cursor: pointer;
                    .pro-icon{
                        margin-top: 20px;
                    }
                    .problems-title{
                        height: 30px;
                        line-height: 30px;
                        margin: 0;
                    }
                    .problems-title:hover{
                        color: #255B8B;
                    }
                }
            }
            .self-service{
                .self-service-con{
                    .self-wrap{
                        .self-service-list{
                            width: 100%;
                            height: 100px;
                            background: #fff;
                            margin-bottom: 10px;
                            border-radius: 10px;
                            .self-service-leftCon{
                                float: left;
                                img{
                                    margin: 20px 15px 0 20px;
                                }
                            }
                            .self-service-centerCon{
                                float: left;
                                .self-alt{
                                    margin: 25px 0 15px;
                                }
                                .self-sub{
                                    .self-sub-list{
                                        font-size: 14px;
                                        color: #666;
                                        margin-right: 20px;
                                    }
                                    .self-sub-list:hover{
                                        color: #255B8B;
                                    }
                                }
                            }
                            .self-service-rightCon{
                                float: right;
                                height: 100px;
                                // line-height: 100px;
                                padding: 0 20px;
                                img{
                                    margin-top: 40px;
                                }
                            }
                        }
                    }
                }
            }
            .contact-us{
                width: 100%;
                margin-bottom: 30px;
                .contact-us-con{

                    .contact-wrap{
                        height: 100px;
                        line-height: 100px;
                        background: #fff;
                        font-size: 16px;
                        color: #333;
                        p{
                            padding-left: 15px;
                            .tel-ico{
                                margin: 0 5px;
                            }
                            .tel-num{
                                font-size: 16px;
                                color: #255B8B;
                            }
                            .consult-now{
                                width: 100px;
                                height: 34px;
                                line-height: 34px;
                                display: inline-block;
                                background: #255B8B;
                                color: #fff;
                                font-size: 14px;
                                text-align: center;
                                margin-left: 10px;
                                border-radius: 6px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
